<template>
  <div style="text-align:center; margin:24px 0;">
    <h2>发布新帖子</h2>
  </div>

  <a-row :gutter="[24,24]" style="max-width:960px; margin:0 auto;">
    <a-col :xs="24" :md="10">
      <a-card shadow style="border-radius:8px;">
        <!-- 不再在 a-form 上绑定 submit 事件 -->
        <a-form
          :model="form"
          label-align="left"
          label-col="{ span: 4 }"
          wrapper-col="{ span: 20 }"
        >
          <a-form-item field="title" label="标题" :required="true">
            <a-input
              v-model="form.title"
              placeholder="请输入帖子标题"
              allow-clear
            />
          </a-form-item>

          <a-form-item field="content" label="内容" :required="true">
            <a-textarea
              v-model="form.content"
              rows="6"
              placeholder="请输入帖子内容"
            />
          </a-form-item>

          <a-form-item field="tagsInput" label="标签">
            <a-input
              v-model="form.tagsInput"
              placeholder="逗号分隔，例如：vue,javascript"
              allow-clear
            />
          </a-form-item>

          <a-form-item wrapper-col="{ offset: 4, span: 20 }">
            <!-- 按钮直接触发 handleSubmit -->
            <a-button type="primary" block @click="handleSubmit">
              发布帖子
            </a-button>
          </a-form-item>
        </a-form>
      </a-card>
    </a-col>

    <a-col :xs="24" :md="14">
      <a-card shadow style="border-radius:8px;">
        <div class="preview">
          <div class="preview-title">
            {{ form.title || "预览标题" }}
          </div>
          <div class="preview-meta">
            发布者：<span class="preview-author">你自己</span>
            <span class="preview-time">{{ now }}</span>
          </div>
          <div class="preview-tags">
            <a-tag
              v-for="tag in tagsArray"
              :key="tag"
              style="margin-right:4px; margin-bottom:4px;"
            >
              {{ tag }}
            </a-tag>
          </div>
          <div class="preview-content">
            {{ form.content || "预览内容，将在这里显示你的帖子文本。" }}
          </div>
        </div>
      </a-card>
    </a-col>
  </a-row>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import dayjs from "dayjs";
import { useRouter } from "vue-router";
import { addPostUsingPost } from "@/api/postController";
import message from "@arco-design/web-vue/es/message";

interface FormState {
  title: string;
  content: string;
  tagsInput: string;
}

const router = useRouter();
const form = ref<FormState>({
  title: "",
  content: "",
  tagsInput: "",
});

// 实时预览的当前时间
const now = dayjs().format("YYYY-MM-DD HH:mm");

// 将 tagsInput 切为数组
const tagsArray = computed(() =>
  form.value.tagsInput
    .split(",")
    .map((t) => t.trim())
    .filter((t) => t)
);

async function handleSubmit() {
  if (!form.value.title.trim() || !form.value.content.trim()) {
    message.error("标题和内容不能为空");
    return;
  }
  try {
    const payload = {
      title: form.value.title.trim(),
      content: form.value.content.trim(),
      tags: tagsArray.value,
    };
    const res = await addPostUsingPost(payload);
    if (res.data.code === 0) {
      message.success("发布成功，3秒后跳转...");
      setTimeout(() => {
        router.push(`/post`);
      },3000);
    } else {
      message.error("发布失败：" + res.data.message);
    }
  } catch (e: any) {
    message.error("网络错误：" + e.message);
  }
}
</script>

<style scoped>
.preview {
  display: flex;
  flex-direction: column;
  min-height: 320px;
}
.preview-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
}
.preview-meta {
  font-size: 12px;
  color: #888;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
}
.preview-tags {
  margin-bottom: 12px;
}
.preview-content {
  flex: 1;
  white-space: pre-wrap;
  font-size: 14px;
  line-height: 1.6;
}
</style>
